<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>写文章</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
    <link rel="stylesheet" href="__STATIC__/style/weui.min.css">
    <link rel="stylesheet" href="__STATIC__/style/cmgd.css">
    <script src="/static/admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/admin/js/jquery.form.js"></script>
    <script src="/static/admin/js/plugins/layer/laydate/laydate.js"></script>
    <script src="/static/pc/js/layer/layer.js"></script>
    <script src="/static/admin/js/laypage/laypage.js"></script>
    <script src="/static/admin/js/laytpl/laytpl.js"></script>
    <!--奥森图标-->
    <link rel="stylesheet" href="__STATIC__/style/FontAwesome_4.2.0/css/font-awesome.min.css">
    <style>
        .text{padding-left:9px; }
        .fa-list-ul{padding-right:8px;}
        .weui-uploader__input-box{margin-left: 10px;}
        .weui-btn_primary{width: 90%;}
        .weui-btn_default{width: 90%;background:#969696; color:#fff;}


        #overlay {
            background: #000;
            filter: alpha(opacity=50); /* IE的透明度 */
            opacity: 0.5;  /* 透明度 */
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 100; /* 此处的图层要大于页面 */
            display:none;
        }
    </style>
</head>
<body>

<div class="container" id="container" >

    <!--顶部搜索-->
    <div class="page home js_show">

        <form id="form" action="{:url('write')}" enctype="multipart/form-data" method="post">

        <div class="page__bd" style="height: 100%;">
            <div class="weui-cells__title">标题</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input class="weui-input" name="title" id="title" type="text" placeholder="请输入标题" value="{$article.title}">
                    </div>
                </div>
            </div>

            <div class="weui-cells__title">所属分类  </div>
            <div class="weui-cells">
                <div class="weui-cell weui-cell_select">
                    <div class="weui-cell__bd">
                        <select class="weui-select" name="type" id="type">
                            <option selected="" value="0">请选择</option>
                            {foreach name="article_cate" id="val"}
                                <option  value="{$val.id}"    {if condition="$val.id eq $article.cate_id"}selected{/if}       >{$val.name}</option>
                                    {foreach name="val.son" id="vv"}
                                    <option  value="{$vv.id}"    {if condition="$vv.id eq $article.cate_id"}selected{/if}       >&nbsp;&nbsp;---{$vv.name}</option>
                                    {/foreach}
                            {/foreach}
                        </select>
                    </div>
                </div>
            </div>


            <div class="weui-cells__title" style="height:30px;">所属栏目<span style="float: right; padding: 5px;border-radius: 5px;color: #fff;background:#2fab87;" onclick="addcolumn();">新增栏目</span></div>
            <div class="weui-cells">
                <div class="weui-cell weui-cell_select">
                    <div class="weui-cell__bd">
                        <select class="weui-select" name="column_id" id="column_id">
                            <option selected="" value="0">请选择</option>
                            {foreach name="lanmu" id="val"}
                            <option  value="{$val.id}"    {if condition="$val.id eq $article.column_id"}selected{/if}       >{$val.user_column}</option>

                            {/foreach}
                        </select>
                    </div>
                </div>
            </div>

            <div class="weui-cells__title">摘要</div>
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" name="desc"  id="desc" placeholder="请输入描述" rows="3">{$article.remark}</textarea>
                    </div>
                </div>
            </div>

            <div class="weui-cells__title">内容</div>
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea class="weui-textarea" name="content"  id="content" placeholder="请输入内容 " rows="5">{$article.content}</textarea>
                    </div>
                </div>
            </div>

            <div class="weui-cells__title">上传封面</div>
            <div class="weui-cells weui-cells_form" style="padding-top:6px;">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" name="img" class="weui-uploader__input" type="file"  />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--{if condition="$group_id != 8"}-->

            <!--<div class="weui-cells weui-cells_form" style="margin-top:8px;">-->
                <!--<div class="weui-cell weui-cell_switch">-->
                    <!--<div class="weui-cell__bd">求推荐</div>-->
                    <!--<div class="weui-cell__ft">-->
                        <!--<input class="weui-switch" name="is_want_tui"  id="is_want_tui" type="checkbox" {if condition="$article.is_want_tui eq 0"}  value="0" {else} vlaue="1" checked {/if} >-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <!--{/if}-->

            <div class="weui-flex">
                <div class="weui-flex__item">
                    <div class="placeholder" style="padding: 0 5px;">
                    <!--<a href="javascript:;" class="weui-btn weui-btn_primary" style="" onclick="submit();" >发布</a>-->

                        <button class="weui-btn weui-btn_primary" type="submit" id="fabu" onclick="check()" > 发布 </button>

                </div></div>
                <div class="weui-flex__item">
                    <div class="placeholder" style="padding: 0 5px;">
                        <button class="weui-btn weui-btn_primary" type="submit" id="caogao" onclick="save()" > 存草稿 </button>
                        <!--<button class="weui-btn weui-btn_primary" type="submit" onclick="save();"> 发布 </button>-->
                </div></div>
            </div>


            <input id="id" name="id" type="hidden" value="{$article.id}">
            <input id="op" name="op" type="hidden" value="1">
        </div>
        </form>
    </div>
</div>


<div style="position: fixed;top:100px;margin: 0 auto; width: 100%; display: none;z-index: 999;" id="col">
    <div style="width:80%; height: 150px;background:#fff;text-align: center;margin-left: 10%;" >
        <div style="padding-top: 20px;">
        新增栏目：<input type="text" id="user_column" style="height: 25px;line-height: 25px;">
        </div>
       <div style="margin:30px;"> <span style="padding: 5px 10px; border-radius: 5px;color: #fff;background:#2fab87" onclick="doadd()">提交</span>

           <span style="padding: 5px 10px; border-radius: 5px;color: #fff;background:red" onclick="cancel()">取消</span>

       </div>

    </div>


</div>

<div id="overlay"></div>




</body>
<script type="text/javascript" src="/static/admin/webupload/webuploader.min.js"></script>
<script type="text/javascript">

    $(function(){
        var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
                $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
                $uploaderInput = $("#uploaderInput"),
                $uploaderFiles = $("#uploaderFiles");
        $uploaderInput.on("change", function(e){
            var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                if (url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }
                $uploaderFiles.html($(tmpl.replace('#url#', src)));
            }
        });
        $uploaderFiles.on("click", "li", function(){
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function(){
            $gallery.fadeOut(100);
        });


        $("#is_want_tui").bind("click", function () {

            if($("#is_want_tui").val()=="0"){
                $("#is_want_tui").val("1");
            }else{
                $("#is_want_tui").val("0");
            }

        });



    });


        $(function(){
            $('#form').ajaxForm({
                beforeSubmit: checkForm, // 此方法主要是提交前执行的方法，根据需要设置
                success: complete, // 这是提交后的方法
                dataType: 'json'
            });

            function checkForm(){

                var vk = $('#op').val();



                if(vk=='1'){
                    var title =   $('#title').val();
                    var type =   $('#type').val();
                    var desc =   $('#desc').val();
                    var content =   $('#content').val();
                    var id =   $('#id').val();
                    var is_img =   $('#uploaderFiles').html();

                    if(title==''){
                        layer.msg('标题不能为空',{icon:5,time:1000,shade: 0.1,});
                        return false;
                    }
                    if(type=='0'){
                        layer.msg('请选择文章分类',{icon:5,time:1000,shade: 0.1,});
                        return false;
                    }
                    if(desc==''){
                        layer.msg('描述不能为空',{icon:5,time:1000,shade: 0.1,});
                        return false;
                    }
                    if(content==''){
                        layer.msg('内容不能为空',{icon:5,time:1000,shade: 0.1,});
                        return false;
                    }
                }

                if(vk=='2'){
                    var title =   $('#title').val();
                    if(title==''){
                        layer.msg('标题不能为空',{icon:5,time:1000,shade: 0.1,});
                        return false;
                    }
                }





            }

            function complete(data){
                if(data.code == 1){
                    layer.msg(data.msg, {icon: 6,time:1500,shade: 0.1}, function(index){
                        layer.close(index);
                        window.location.href="{:url('Usercenter/index')}";
                    });
                }else{
                    layer.msg(data.msg, {icon: 5,time:1500,shade: 0.1}, function(index){
                        layer.close(index);
                    });
                    return false;
                }
            }

        });

        function check(){
            $('#op').val('1');
        }

        function save(){
            $('#op').val('2');
        }


    //底部导航
    $(function(){
        $('.weui-tabbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });
    });


    function addcolumn(){
        $("#overlay").height($('#container').height());
        $("#overlay").width($(window).width());

        // fadeTo第一个参数为速度，第二个为透明度
        // 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题
        $("#overlay").fadeTo(200, 0.5);


        $('#col').show();
    }

    function cancel(){
        $('#col').hide();
        $("#overlay").fadeOut(200);
    }



    function doadd(){

        var user_column = $('#user_column').val();
        console.log(user_column);
        if( '' == $.trim($('#user_column').val())){
            layer.msg('新增的分类不能为空', {icon: 5,time:1500,shade: 0.1}, function(index){
                layer.close(index);
            });
            return false;
        }

        $.post('{:url("article/add_column")}', {user_column: user_column}, function(data){

            if(data.code==1){
                $("#column_id").append("<option value='"+data.new_id+"'>"+user_column+"</option>"); //为Select追加一个Option(下拉项)
                $("#column_id").val(data.new_id);
                $('#user_column').val('');
                $('#col').hide();
                $("#overlay").fadeOut(200);

            }else{
                layer.msg(data.msg, {icon: 5,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
            }


        });

    }



</script>

</html>